<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同的生命周期函数</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <h1>当前的n值是{{n}}</h1>
  <button @click="addN">点击按钮n+1</button>
    <button @click="byb">点我销毁vm</button>
</div>

<script>
  const vm=new Vue({
    el:'#root',
    data:{
      n:1
    },
    methods:{
        addN(){
          this.n++
        },
        byb(){
            //销毁实例对象
            this.$destroy()
        }
    },
      watch:{
        n:{
            immediate:true,
            handler(newValue,oldValue){
                console.log("n的值由"+oldValue+'变为了'+newValue)
            }
        }
      },
    //各种生命函数

    //创建vue对象,init初始化之后(生命周期,事件初始化,但数据代理未开始)之后,数据检测和数据代理创建之前
    //此时无法通过vm访问到data中的数据,methods中的方法
    beforeCreate(){
      console.log("beforeCreate,还没有进行数据挂在和数据检测")
      console.log(this)//可以看到很多地方都是null,没有进行数据代理,无法通过vm访问到data中的数据和methods中的方法
      // debugger
    },

    //数据检测和数据代理创建之后
    //此时可以通过vm访问到data中的数据和methods中配置的方法
    created(){
      console.log('created已经完成数据挂在和数据检测')
      console.log(this)
      // debugger
    },

    //vue已经完成模板解析,生成虚拟DOM在内存中,但是还未显示,页面呈现的都是未经Vue编译的DOM结构(没有vue时该怎么显示就怎么显示)
    //所有对DOM的操作都无效
    beforeMount(){
      console.log('beforeMount还未进行模板解析,生成了虚拟DOM')
      // debugger
    },

    //将内存中的虚拟DOM转化为真实DOM插入页面
    //此时页面中呈现的是经过Vue编译的DOM,对DOM的操作均有效
    //至此初始化过程结束,一般在此进行:定时器,网络请求,订阅消息,绑定自定义事件等初始化操作
    mounted() {
      console.log('mounted,已经转为真实DOM完成了模板解析')
      // debugger
    },

    //当vm中的数据发生改变,但页面还是旧的
    beforeUpdate(){
      console.log('BeforeUpdate,数据发生了变化,但还未重新解析模板')
      // debugger
    },

    //已经根据新数据,生成新的虚拟DOM,随后与旧DOM进行比较,最终完成页面更新
    updated(){
      console.log('updated,重新解析了模板')
    },

      //Vue实例对象销毁前操作
      //此时vm中所有的data,methods.指令等等都处于可用状态
      //马上要执行销毁过程,一般在此阶段关闭定时器,取消订阅消息,解绑自定义事件等等
    beforeDestroy(){
        console.log('beforeDestroy即将进行销毁')
    },

    //销毁之后
      destroyed(){
          console.log('destroyed已经销毁')
      }
  })
</script>
</body>

</html>